<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="utf-8">
        <title>Gallery</title>
        <script src="./lib/jquery-1.4.2.js"></script>
        <script src="./lib/galleria.js"></script>
        <style>
            html,body{background:#111}
            .content{color:#ccc;font:14px/1.4 arial,sans-serif;width:800px;margin:20px auto}
            h1{line-height:1.1;letter-spacing:-1px;}
            #galleria{height:600px;}
            a{color:#aaa;}
        </style>
    </head>
<body>
    <div class="content">
        <div id="galleria">
        	<!--DYNAMIC_CONTENT-->
        </div>
    </div>
 
    <script>
    
    // Load theme
    Galleria.loadTheme('./lib/themes/classic/galleria.classic.js');
    
    // run galleria and add some options
    $('#galleria').galleria({
        image_crop: false, // crop all images to fit
        thumb_crop: false, // crop all thumbnails to fit
        transition: 'fade', // crossfade photos
        transition_speed: 700, // slow down the crossfade
        data_config: function(img) {
            // will extract and return image captions from the source:
            return  {
                title: $(img).parent().next('strong').html(),
                description: $(img).parent().next('strong').next().html()
            };
        },
        extend: function() {
            this.bind(Galleria.IMAGE, function(e) {
                // bind a click event to the active image
                $(e.imageTarget).css('cursor','pointer').click(this.proxy(function() {
                    // open the image in a lightbox
                    this.openLightbox();
                }));
            });
        }
    });
    </script>
    </body>
</html>